<template>
	<view>
		<view class="example" >
			<uni-grid :column="4" :square="false" :showBorder="false" :highlight="true"  >
				<uni-grid-item  >
					<view class="grid-item-box1" @click="changeTab(0)" :class="{'active':current==0}">
						<zywork-icon   type="iconkuaidi_" color="#00aa7f" size="50"  />
						<text class="text" >我的代取</text>
					</view>
				</uni-grid-item>
				<uni-grid-item  >
					<view class="grid-item-box1" @click="changeTab(1)" :class="{'active':current==1}">
						<zywork-icon   type="icondayin" color="#00aa7f" size="50"  />
						<text class="text">我的打印</text>
					</view>
				</uni-grid-item>
				<uni-grid-item  >
					<view class="grid-item-box1" @click="changeTab(2)" :class="{'active':current==2}">
						<zywork-icon   type="iconjikuaidi" color="#00aa7f" size="50"  />
						<text class="text">我的代寄</text>
					</view>
				</uni-grid-item>
				<uni-grid-item >
					<view class="grid-item-box1" @click="changeTab(3)" :class="{'active':current==3}">
						<zywork-icon   type="iconwaimai" color="#00aa7f" size="50"  />
						<text class="text">我的跑腿</text>
					</view>
				</uni-grid-item>
			</uni-grid>
			<view v-if="current===0">
				<v-tabs height="90rpx"
				lineHeight="6rpx" 
				v-model="daiquTabCurrent" 
				fontSize="36rpx" 
				:tabs="daiquTab" 
				@change="daiquChangeTab"  
				activeColor="#00aa7f"
				:scroll="false"
				color="#515151" 
				lineColor="#00aa7f"></v-tabs>
			</view>
			<view v-if="current===1">
				<v-tabs height="90rpx"
				lineHeight="6rpx" 
				v-model="dayinTabCurrent" 
				fontSize="36rpx" 
				:tabs="dayinTab" 
				@change="dayinChangeTab"  
				activeColor="#00aa7f"
				:scroll="false"
				color="#515151" 
				lineColor="#00aa7f"></v-tabs>
			</view>
			<view v-if="current===2">
				<v-tabs height="90rpx"
				lineHeight="6rpx" 
				v-model="daijiTabCurrent" 
				fontSize="36rpx" 
				:tabs="daijiTab" 
				@change="daijiChangeTab"  
				activeColor="#00aa7f"
				:scroll="false"
				color="#515151" 
				lineColor="#00aa7f"></v-tabs>
			</view>
			<view v-if="current===3">
				<v-tabs height="90rpx"
				lineHeight="6rpx" 
				v-model="paotuiTabCurrent" 
				fontSize="36rpx" 
				:tabs="paotuiTab" 
				@change="paotuiChangeTab"  
				activeColor="#00aa7f"
				:scroll="false"
				color="#515151" 
				lineColor="#00aa7f"></v-tabs>
			</view>
		</view>
		
		<view class="list" v-if="current==0" :style="{paddingTop:topHeight+'px'}">
			<view  class="list-item" v-for="(item,indexs) in orderCourierList" :key="indexs">
				<uni-list :border="false" >
					<uni-list-item  :isBorder="true" :extraIcon="extraIcon" showExtraIcon="true" >
						<view  class="list-item-column" >
							<view class="slot-box">
								<text class="slot-text">付款金额：{{item.schoolOrderPayAmount}}</text>
							</view>
							<text class="uni-list-item__content-note">下单时间：{{item.schoolOrderPlaceOrderTime}}</text>
						</view>
					</uni-list-item>
					<uni-list-item  :isBorder="true" :extraIcon="extraIcon1" showExtraIcon="true" >
						<view  class="list-item-column" >
							<view class="">
								取货地址
							</view>
							<view class="slot-box">
								<text class="slot-text">{{item.schoolOrderPlace}}</text>
							</view>
						</view>
						<view slot="right">
							<zywork-icon  type="iconditu" color="#00aa7f" :size="50" />
						</view>
					</uni-list-item>
					<uni-list-item  :isBorder="true" :extraIcon="extraIcon2"  showExtraIcon="true">
						<view  class="list-item-column" >
							<view class="">
								配送地址
							</view>
							<view class="slot-box">
								<text class="slot-text">{{item.schoolOrderAddressStoriedBuilding}}{{item.schoolOrderAddressArea}}</text>
							</view>
						</view>
						<view slot="right">
							<zywork-icon  type="iconditu" color="#00aa7f" :size="50" />
						</view>
					</uni-list-item>
					<uni-list-item  :isBorder="true" :extraIcon="{color: '#ffb907',size: 50,type: 'iconicon'}"  showExtraIcon="true">
						<view  class="list-item-column" >
							<view class="">
								订单号
							</view>
							<view class="slot-box">
								<text class="slot-text">{{item.schoolOrderId}}</text>
							</view>
						</view>
					</uni-list-item>
					
					<view class="zy-row">
						<view class="add-order-btn" @click="getOrderInfo(item)">
							查看订单详情
						</view>
						<view v-if="item.schoolOrderStatus==0" @click="cancelAnOrder(item)" class="add-order-btn" style="background-color: #55aaff;">
							取消订单
						</view>
						<view v-if="item.schoolOrderStatus==1" class="add-order-btn" style="background-color: #00AA7F;">
							到店取件配送中
						</view>
						<view v-if="item.schoolOrderStatus==2" class="add-order-btn" style="background-color: #ff6233;" @click="getDispatching(item)">
							确认收货
						</view>
					</view>
				</uni-list>
			</view>
		</view>
		<view class="list" v-if="current==1" :style="{paddingTop:topHeight+'px'}">
			<view  class="list-item" v-for="(item,indexs) in orderCourierList" :key="indexs">
				<uni-list :border="false" >
					<uni-list-item  :isBorder="true" :extraIcon="extraIcon" showExtraIcon="true" >
						<view  class="list-item-column" >
							<view class="slot-box">
								<text class="slot-text">付款金额：{{item.totalAmount}}</text>
							</view>
							<text class="uni-list-item__content-note">下单时间：{{item.createTime}}</text>
						</view>
					</uni-list-item>
					<uni-list-item v-if="item.isUnfold" :isBorder="true" :extraIcon="{color: '#ffb907',size: 50,type: 'iconyanse'}"  showExtraIcon="true">
						<view  class="list-item-column" >
							<view class="">
								颜色
							</view>
							<view class="slot-box">
								<text class="slot-text">{{item.ys}}</text>
							</view>
						</view>
					</uni-list-item>
					<uni-list-item v-if="item.isUnfold" :isBorder="true" :extraIcon="{color: '#939393',size: 50,type: 'iconzhizhang'}"  showExtraIcon="true">
						<view  class="list-item-column" >
							<view class="">
								纸张类型
							</view>
							<view class="slot-box">
								<text class="slot-text">{{item.zzlx}}</text>
							</view>
						</view>
					</uni-list-item>
					<uni-list-item v-if="item.isUnfold" :isBorder="true" :extraIcon="{color: '#939393',size: 50,type: 'iconzhizhang'}"  showExtraIcon="true">
						<view  class="list-item-column" >
							<view class="">
								单双面
							</view>
							<view class="slot-box">
								<text class="slot-text">{{item.dsm}}</text>
							</view>
						</view>
					</uni-list-item>
					<uni-list-item v-if="item.isUnfold" :isBorder="true" :extraIcon="{color: '#939393',size: 50,type: 'iconzhizhang'}"  showExtraIcon="true">
						<view  class="list-item-column" >
							<view class="">
								缩印
							</view>
							<view class="slot-box">
								<text class="slot-text">{{item.suoyin}}页/张</text>
							</view>
						</view>
					</uni-list-item>
					<uni-list-item v-if="item.isUnfold" :isBorder="true" :extraIcon="{color: '#939393',size: 50,type: 'iconzhizhang'}"  showExtraIcon="true">
						<view  class="list-item-column" >
							<view class="">
								页码范围
							</view>
							<view class="slot-box">
								<text class="slot-text">{{item.ymfw}}</text>
							</view>
						</view>
					</uni-list-item>
					<uni-list-item v-if="item.isUnfold" :isBorder="true" :extraIcon="{color: '#939393',size: 50,type: 'iconzhizhang'}"  showExtraIcon="true">
						<view  class="list-item-column" >
							<view class="">
								装订类型
							</view>
							<view class="slot-box">
								<text class="slot-text">{{returnZhuangDin(item.zhuangding)}}</text>
							</view>
						</view>
					</uni-list-item>
					<uni-list-item  :isBorder="true" :extraIcon="{color: '#ffb907',size: 50,type: 'iconicon'}"  showExtraIcon="true">
						<view  class="list-item-column" >
							<view class="">
								取件码
							</view>
							<view class="slot-box">
								<text class="slot-text">{{item.takeCode}}</text>
							</view>
						</view>
						<view slot="right"  @click="paste(item.takeCode)" class="slot-text" style="background-color: #00AA7F;color: #FFFFFF;padding: 10rpx 15rpx;border-radius: 8rpx;">
							复制取件码
						</view>
					</uni-list-item>
					<uni-list-item  :isBorder="true" :extraIcon="{color: '#ffb907',size: 50,type: 'iconicon'}"  showExtraIcon="true">
						<view  class="list-item-column" >
							<view class="">
								订单号
							</view>
							<view class="slot-box">
								<text class="slot-text">{{item.orderId}}</text>
							</view>
						</view>
						<view slot="right" @click="paste(item.orderId)" class="slot-text" style="background-color: #00AA7F;color: #FFFFFF;padding: 10rpx 15rpx;border-radius: 8rpx;">
							复制单号
						</view>
					</uni-list-item>
					
					<uni-list-item  :isBorder="false" :extraIcon="{color: '#ff0000',size: 50,type: 'icondingdan'}"  showExtraIcon="true">
						<view  class="list-item-column" >
							<view class="">
								订单状态
							</view>
							<view class="slot-box" >
								<text class="slot-text">{{item.completionStatus}}</text>
							</view>
						</view>
					</uni-list-item>
					<view class="zy-row">
						<view class="add-order-btn" @click="unfolds(item)">
							{{item.isUnfold?"收起":"展开"}}
						</view>
				    </view>
				</uni-list>
			</view>
		</view>
	</view>
	
</template>

<script>
	import zyworkIcon from '@/components/zywork-icon/zywork-icon.vue'
	import vTabs from '@/components/v-tabs/v-tabs.vue'
	import uniGrid from '@/components/uni-grid/uni-grid.vue'
	import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue'
	import * as ResponseStatus from '@/common/response-status.js'
	import {
		showInfoToast,
		doGet,
		doPostJson,
		MY_SHARE_CODE,
		SHARE_CODE_PAGE_IMG,
		SHARE_TITLE,
		SHARE_CODE,
		FRONT_BASE_URL,
		LOCAL_FILE_STORAGE,
		USER_ROLES,
		USER_ID,
		USER_NICKNAME,
		USER_HEADICON,
		HOST_ROOM_INFO,
		USER_SCHOOL 
	} from '@/common/util.js'
	export default {
		components: {
			zyworkIcon,
			vTabs,
			uniGrid,
			uniGridItem
		},
		data() {
			return {
				current: 0,
				tabs: [
				'我的代取',
				'我的代寄',
				'我的跑腿',
				],
				daiquTabCurrent: 0,
				daiquTab: [
				'待骑手接单',
				'正在到店',
				'配送中',
				'已送达',
				],
				daijiTabCurrent: 0,
				daijiTab: [
				'待上门',
				'已取件',
				'已寄出',
				],
				paotuiTabCurrent: 0,
				paotuiTab: [
				'正在到店',
				'已到店',
				'已送达',
				],
				dayinTabCurrent: 0,
				dayinTab:[
					'已付款',
				],
				bookbindingArr: [{
						id: 1,
						bookbinding: "无装订"
					},
					{
						id: 2,
						bookbinding: "普通封面装订"
					},
					{
						id: 3,
						bookbinding: "铜版纸胶装订"
					},
					{
						id: 4,
						bookbinding: "精装"
					}
				],
				pager:{
					"pageNo": 1,
					"pageSize": 10,
					// "schoolOrderSchoolId": 1,
					"schoolOrderStatus":0
				},
				canPullDownRefresh: true,
				onPullDownRefresh: false,
				showLoading: false,
				orderList:[],
				orderCourierList:[],
				topHeight:0
			};
		},
		onLoad() {
			// #ifdef APP-PLUS
			let info = uni.createSelectorQuery().selectAll("example").boundingClientRect()
			 info.exec(res => {
				 this.topHeight = res[0].height
			 })
			// #endif
			
			 // #ifdef MP-WEIXIN
			 uni.createSelectorQuery().selectAll('.example').boundingClientRect( res=> {
			    this.topHeight = res[0].height
			 }).exec()
			 // #endif
			if(uni.getStorageSync(USER_SCHOOL)){
				this.pager.schoolOrderSchoolId = uni.getStorageSync(USER_SCHOOL);
			}
		},
		onShow() {
			this.getSchoolOrder('refresh');
		},
		onPullDownRefresh() {
			this.getSchoolOrder('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		//加载更多
		onReachBottom(){
			uni.showLoading({
				title: '正在加载'
			})
			this.showLoading = true
			this.pager.pageNo+=1
			this.getSchoolOrder('add');
		},
		methods:{
			paste(value) {
				uni.setClipboardData({
					data: value
				});
			},
			unfolds(item){
				if(item.isUnfold){
					item.isUnfold = false
				}else {
					item.isUnfold =true
				}
				this.$forceUpdate()
			},
			returnZhuangDin(id){
				for(var i=0;i<this.bookbindingArr.length;i++){
					if(this.bookbindingArr[i].id==id){
						return this.bookbindingArr[i].bookbinding
					}
				}
			},
			changeTab(index){
				this.current = index;
				// this.pager.schoolOrderStatus =0;
				this.getSchoolOrder('refresh');
			},
			daiquChangeTab(index){
				this.daiquTabCurrent = index;
				this.pager.schoolOrderStatus = index;
				this.getSchoolOrder('refresh');
			},
			dayinChangeTab(index){
				this.dayinTabCurrent = index;
				this.getSchoolOrder('refresh');
			},
			daijiChangeTab(index){
				this.daijiTabCurrent = index;
			},
			paotuiChangeTab(index){
				this.paotuiTabCurrent = index;
			},
			getOrderInfo(item){
				item.status =1;
				var orderCourier = JSON.stringify(item); // 这里转换成 字符串
				uni.navigateTo({
					url:"/pages/order/createOrder?orderCourier="+orderCourier
				})
			},
			getDispatching(item){
				let url ="/school-order/user/user/distribution/";
				doGet(url+item.schoolOrderId, {}, {}, true).then(response => {
					let [error, res] = response;
					if (res.data.code === ResponseStatus.OK) {
						showInfoToast(res.data.message)
						this.getSchoolOrder('refresh');
					} else {
						showInfoToast(res.data.message)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			cancelAnOrder(item){
				let url ="/wx-pay/goods-order/xcx-refund-request/kddn_refund/";
				uni.showModal({
					title: '提示',
					content: '确定取消订单?',
					success: (e) => {
						if (e.confirm) {
							doGet(url+item.schoolOrderId, {}, {}, true).then(response => {
								let [error, res] = response;
								if (res.data.code === ResponseStatus.OK) {
									showInfoToast(res.data.message)
									item.schoolOrderStatus =-1
									// this.getSchoolOrder('refresh');
								} else {
									showInfoToast(res.data.message)
								}
							}).catch(err => {
								console.log(err)
							})
						}
					}
					
				})
				
			},
			addOrderBtn(item){
				doPostJson('/school-order/user/courier/order/'+item.orderId, {}, {}, true).then(response => {
					let [err, res] = response
					if (res.data.code === ResponseStatus.OK) {
						showInfoToast(res.data.message)
						this.getSchoolOrder('refresh');
					}else{
						showInfoToast(res.data.message)
					}
				}).catch(error => {})
			},
			getSchoolOrder(type){
				if(type === 'refresh'){
					this.pager.pageNo=1
				}
				if(this.current==0){
					doPostJson('/school-order-address-user/user/pager-cond-user', this.pager, {}, true).then(response => {
						let [err, res] = response
						if (res.data.code === ResponseStatus.OK) {
							if (type === 'refresh') {
								this.orderCourierList = res.data.data.rows;
							} else {
								this.orderCourierList= this.orderCourierList.concat(res.data.data.rows)
							}
							if (this.onPullDownRefresh) {
								this.onPullDownRefresh = false
								uni.hideLoading()
							}
							if (this.showLoading) {
								this.showLoading = false
								uni.hideLoading()
							}
						}
					}).catch(error => {})
				}else if(this.current==1){
					doPostJson('/graphic-order/user/orderList', this.pager, {}, true).then(response => {
						let [err, res] = response
						if (res.data.code === ResponseStatus.OK) {
							if (type === 'refresh') {
								this.orderCourierList = res.data.data.records;
							} else {
								this.orderCourierList= this.orderCourierList.concat(res.data.data.records)
							}
							if (this.onPullDownRefresh) {
								this.onPullDownRefresh = false
								uni.hideLoading()
							}
							if (this.showLoading) {
								this.showLoading = false
								uni.hideLoading()
							}
						}
					}).catch(error => {})
				}else if(this.current==2){
					this.orderCourierList = []
				}
				
			}	
		}
	}
</script>

<style lang="scss">
	@import '@/common/zywork-main.scss';
	.example{
		position: fixed;
		z-index: 10;
		width: 100%;
		height: 240rpx;
		padding-top: var(--status-bar-height);
		background-color: #FFFFFF;
		@include padding;
		.grid-item-box1 {
			width: 100%;
			// height: 140rpx;
			padding: 20rpx 0rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text{
				margin-top: 10rpx;
				color: $info-text-color;
				font-size: $font-base;
			}
			&.active{
				background-color: #eeeeee;
			}
			.active-color{
				color: #FFFFFF;
			}
		}
		.grid-item-box2 {
			width: 100%;
			// height: 140rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image{
				width: 50rpx;
				height: 50rpx;
			}
			text{
				margin-top: 10rpx;
				color: #6f6f6f;
				font-size: $font-sm;
			}
		}
	}
	page{
		background-color: #f4f4f4;
	}
	// .page{
	// 	width: 100%;
	// 	height: 100%;
	// 	background-color: #f4f4f4;
	// }
	.zy-row{
		@include flex-center-row;
		align-items: center;
		justify-content: space-around;
	}
	.list{
		@include flex-center-column;
		@include padding;
		background-color: #f4f4f4;
		align-items: center;
		.list-item{
			padding: 10rpx 10rpx;
			margin: 10rpx 0rpx;
			width: 100%;
			border-radius: 35rpx;
			border: solid 1rpx #EEEEEE;
			background-color: $primary-backcolor;
			.list-item-column{
				@include flex-center-column;
			}
			.add-order-btn{
				margin: 20rpx auto;
				width: 260rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #ffaa00;
				text-align: center;
				border-radius: 15rpx;
				color: $primary-color;
			}
			
		}
		
	}
	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		padding: 10rpx 0rpx;
	}
	.slot-text{
		color: #3b4144;
		font-size: $font-base;
	}
</style>
